import { PureComponent } from 'react'
import { Modal, Input, Button, InputNumber, Table, Select } from 'antd'
import styles from './costModal.less'
const { Option } = Select
class CostModalFirst extends PureComponent{
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    render(){
        const { visible } = this.props
        const columns = [
            {
              title: 'Name',
              dataIndex: 'name',
            },
            {
              title: 'Cash Assets',
              className: 'column-money',
              dataIndex: 'money',
            },
            {
              title: 'Address',
              dataIndex: 'address',
            },
          ];
          
          const data = [
            {
              key: '1',
              name: 'John Brown',
              money: '￥300,000.00',
              address: 'New York No. 1 Lake Park',
            },
            {
              key: '2',
              name: 'Jim Green',
              money: '￥1,256,000.00',
              address: 'London No. 1 Lake Park',
            },
            {
              key: '3',
              name: 'Joe Black',
              money: '￥120,000.00',
              address: 'Sidney No. 1 Lake Park',
            },
          ];
          
        return(
            <Modal
                title="墨中成本录入"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={650}
            >
                <div className={styles.costModalFirst}>
                    <div className={styles.costModalFirstSearch}>
                        <span className={styles.costModalFirstSpan}>舱单号：</span>
                        <Input className={styles.costModalFirstInput} />
                        <Button type="primary" icon="search" style={{marginLeft: '48px'}}>查询</Button>
                    </div>
                </div>
                <div className={styles.costModalFirst}>
                    <div className={styles.costModalFirstSearch}>
                        <span className={styles.costModalFirstSpan}>供应商称重(KG)：</span>
                        <InputNumber className={styles.costModalFirstInput} />
                    </div>
                    <div className={styles.costModalFirstSearch} style={{marginLeft: '48px'}}>
                        <span className={styles.costModalFirstSpan} style={{width: '85px'}}>体积(cm3)：</span>
                        <InputNumber className={styles.costModalFirstInput} />
                    </div>
                </div>
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered
                    title={() => (<div  className={styles.headerTitle}>
                    <span className={styles.headerLeft}>成本详情</span>
                    <div className={styles.headerRight}>
                        <span className={styles.costModalFirstSpan} style={{width: '85px'}}>供应商：</span>
                        <Select style={{width: '165px'}}>
                            <Option value="value">value</Option>
                        </Select>
                        <Button type="primary" icon="plus" style={{marginLeft: '24px'}}>添加</Button>
                    </div>
                    </div>)
                   }
                />
            </Modal>
        )
    }
}
export default CostModalFirst